﻿@inherits NITASA.Views.AutofacEnabledViewPage<List<NITASA.Data.Media>>
@using NITASA.Services.Security
@using NITASA.Data
@using NITASA.Areas.Admin.Helper
@{
    ViewBag.Title = "Medias";
}
@section PageLevelStyles {
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <style>
        #loadmoreajaxloader {
            background: none repeat scroll 0 0 #000;
            border-radius: 10px;
            bottom: 50%;
            color: #fff;
            left: 45%;
            opacity: 0.8;
            padding: 10px;
            position: fixed;
            text-align: center;
            width: 200px;
            z-index: 100;
        }
    </style>
}
<div class="main-content">
    <div class="container-fluid padded">
        @if (TempData["SuccessMessage"] != null)
        {
            <div class="alert alert-success">
                <button class="close" data-dismiss="alert" type="button">
                    ×
                </button>
                @TempData["SuccessMessage"]
            </div>
        }
        @if (TempData["ErrorMessage"] != null)
        {
            <div class="alert alert-error">
                <button class="close" data-dismiss="alert" type="button">
                    ×
                </button>
                @TempData["ErrorMessage"]
            </div>
        }
        <div id="containerfluid"></div>
        <div class="row-fluid">
            <div class="span12">
                @if (aclService.HasRight(Rights.AddNewMedias))
                {
                    <div class="box">
                        <div class="box-header">
                            <span class="title">Upload Media</span>
                        </div>
                        <div class="box-content">
                            <div class="padded">

                                @using (Html.BeginForm("Add", "Media", FormMethod.Post, new { @enctype = "multipart/form-data", id = "frm1" }))
                                {
                                    <div class="span4">
                                        <div class="control-group" style="margin-bottom: 0px">
                                            <label class="control-label" style="text-align: left;">
                                                Upload Media
                                            </label>
                                            <div class="controls">
                                                <input type="file" name="MediaFiles" id="MediaFiles" data-val-required="Please select media"
                                                       data-val="true" multiple="multiple" accept=".jpg,.bmp,.jpeg,.png,.gif" />
                                                <div style="color: red;">
                                                    <span id="nav-url-error" data-valmsg-replace="true" data-valmsg-for="FileName" class="field-validation-valid">
                                                    </span>
                                                </div>
                                                (Only .jpg, .bmp, .jpeg, .png, .gif files are allowed,<br /> To upload multiple file press ctr+select file.)
                                            </div>
                                        </div>
                                    </div>
                                    <div class="span4">
                                        <div class="control-group">
                                            <label class="control-label" style="text-align: left;">
                                                Media Attribute
                                            </label>
                                            <div class="controls">
                                                @Html.TextBox("Attribute", null, new { id = "Attribute" })
                                            </div>
                                        </div>
                                    </div>
                                    <div class="span6">
                                        <div class="control-group">
                                            <label class="control-label" style="text-align: left;">
                                            </label>
                                            <div class="controls">
                                                <input type="button" id="addmedia" value="Upload Media" class="btn btn-blue" />
                                            </div>
                                        </div>
                                    </div>
                                }
                                <div class="clear">
                                </div>
                            </div>
                        </div>
                    </div>
                }
                <div class="box">
                    <div class="box-header">
                        <span class="title">Media List</span>
                        @Html.Hidden("CurrentPageIndex", 0)
                    </div>
                    <div class="box-content">
                        <div class="padded">
                            <div id="Images">
                                @if (Model != null && Model.Count() > 0)
                                {
                                    @Html.Partial("~/Areas/Admin/Views/Media/ImageList.cshtml", Model)
                                }
                                else
                                {
                                    <h2 style="margin-left: 16px;">No media found.</h2>
                                }
                            </div>
                            <div class="clear">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="loadmoreajaxloader" style="display: none;">
    <img src="@Url.Content("/Areas/Admin/assets/images/loader-big.gif")" alt="Loading..." />
</div>

@section BottomScript{
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            $("#Attribute").autocomplete({
                source: '@Url.Action("MediaAttribute", "Media")',
                minLength: 1
            });
        });

        var loading = false;
        $(document).ready(function () {
            var TotalPage = @ViewBag.TotalPage;
            $(window).scroll(function () {
                if (!loading && ($(window).scrollTop() == $(document).height() - $(window).height())) {
                    var cp = parseInt($("#CurrentPageIndex").val());
                    if(cp < TotalPage){
                        $("#CurrentPageIndex").val(cp + 1);
                        loadmedias();
                    }
                }
            });
            $('#addmedia').click(function () {
                if ($("#MediaFiles").get(0).files.length>0) {
                    $('#frm1').submit();
                }
                else {
                    var error = '<div class="alert alert-error"><button class="close" data-dismiss="alert" type="button">×</button>Please select atlease one media</div>';
                    $("#containerfluid").html(error);
                }
                return false;
            });
        });
        function loadmedias() {
            loading =true;
            $("div#loadmoreajaxloader").show();
            var curentpageindex = parseInt($("#CurrentPageIndex").val());
            $.ajax({
                type: "POST",
                url: "/Admin/Media/GetMediaList",
                data: {CurrentPageIndex:curentpageindex},
                success: function (data) {
                    if (data) {
                        $("#Images").append(data);
                    }
                    $("div#loadmoreajaxloader").hide();
                },
                complete: function(){
                    loading = false;
                    if($("#Images").html().trim().length==0){
                        $("#Images").append("<h2 style=\"margin-left: 16px;color: #793818\">No media found.</h2>");
                    }
                }
            });
            return false;
        }
    </script>

}